<template>
  <div v-loading="loading" class="app-container addExpense">
    <el-form ref="form" :model="form" :disabled="true" label-width="120px">
      <el-row>
        <mainTilte title="基本信息" />
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="组合系统sku" prop="code">
            <el-input v-model.trim="form.code" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属店铺" prop="shop_id">
            <el-input v-model.trim="form.shop_name" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="中文名称" prop="name_ch">
            <el-input v-model.trim="form.name_ch" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="英文名称" prop="name_en">
            <el-input v-model="form.name_en" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="套餐单价">
            <el-input v-model.trim="price_usd" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <mainTilte title="组合商品清单" />
      </el-row>
      <el-table :data="form.product" stripe fit border>
        <el-table-column type="selection" width="55" />
        <el-table-column label="缩略图" width="150" align="center">
          <template slot-scope="scope">
            <thund :img="scope.row.image_url" />
          </template>
        </el-table-column>
        <el-table-column prop="code" label="系统sku" width="180" align="center" />
        <el-table-column prop="name_ch" label="中文名称" width="180" align="center" />
        <el-table-column prop="name_en" label="英文名称" width="180" align="center" />
        <el-table-column prop="packing_method" label="包装方式" width="180" align="center">
          <template slot-scope="scope">
            <dic-values :code="scope.row.packing_method" :dictionaries="packMethodList" />
          </template>
        </el-table-column>
        <el-table-column prop="category_text" label="商品分类" width="180" align="center" />
        <el-table-column prop="price" label="基准价" width="180" align="center" />
        <el-table-column label="数量" prop="number" min-width="180" align="center" />
      </el-table>
    </el-form>
    <div class="dialog-footer-center">
      <span>
        <el-button type="primary" @click="back">返回</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import dicValues from '@/components/dicTransform/index'
export default {
  name: 'PortfolioInfo',
  components: {
    dicValues
  },
  data() {
    return {
      id: '', // id
      form: {
        value: '',
        code: '',
        shop_id: '',
        name_ch: '',
        name_en: '',
        price_usd: '',
        product: []
      },
      loading: false,
      packMethodList: [
        {
          code: 1,
          name: '普通商品'
        },
        {
          code: 2,
          name: '多箱包装'
        }
      ]
    }
  },
  computed: {
    price_usd() {
      const vm = this
      if (vm.form.product.length > 0) {
        const count = vm.form.product.reduce((total, ele) => {
          const price = vm.$computed.accMul(ele.number, ele.price)
          total = vm.$computed.accAdd(total, price)
          return total
        }, 0)
        return +count.toFixed(2)
      } else {
        return 0
      }
    }
  },
  created() {
    const vm = this
    vm.id = vm.$route.params.id
    vm.getInfo()
  },
  methods: {
    // 获取详情
    getInfo() {
      const vm = this
      vm.loading = true
      vm.$http
        .get(`/productCombination/${vm.id}`)
        .then((res) => {
          const { code, name_ch, name_en, price_usd, list: product, shop_name } = res.data
          vm.form.code = code
          vm.form.name_ch = name_ch
          vm.form.name_en = name_en
          vm.form.price_usd = price_usd
          vm.form.shop_name = shop_name
          vm.form.product = product.map((e) => {
            e['category_text'] = `${e.parent_name}-${e.category_name}`
            return e
          })
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    // 返回
    back() {
      const vm = this
      vm.$router.go(-1)
    }
  }
}
</script>

<style scoped>
</style>
